<template>
  <div>
    <el-button type="primary" size="mini" @click="addCommission">新增</el-button>
<!--    <el-table :data="tableData" style="width: 100%" border>-->
    <ad-table ref="order"
              :data="tableData" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table >
<!--      <el-table-column prop="name" label="提成名称"/>-->
      <el-table-column prop="royaltyType" label="提成类型">
        <template slot-scope="scope">
          <span v-if="scope.row.royaltyType == 1">接单数</span>
          <span v-if="scope.row.royaltyType == 2">毛利点</span>
          <span v-if="scope.row.royaltyType == 3">路线</span>
        </template>
      </el-table-column>
      <el-table-column prop="transportFee" label="发运金额/点" />
      <el-table-column prop="deliveryFee" label="交付金额/点" />
      <el-table-column prop="createFee" label="制单金额/点" />
      <el-table-column prop="pickFee" label="提车金额/点" />
      <ad-table-column label="城市" prop="cityCode"   ctype="city" />
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
<!--    </el-table>-->
    </ad-table>
    <el-dialog
      append-to-body
      :title="title"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form label-width="80px" ref="form" :model="form" :rules="rules">
        <el-row>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="提成名称" prop="name">-->
<!--              <el-input placeholder="请输入" v-model="form.name"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="提成类型" prop="royaltyType">
              <el-select v-model="form.royaltyType" placeholder="请选择" style="width: 100%" :disabled="title=='编辑'">
                <el-option label="接单数" value="1"></el-option>
                <el-option label="毛利点" value="2"></el-option>
                <el-option label="路线" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row v-if="showType == 1">
          <el-col :span="12">
            <el-form-item label="发运金额" prop="transportFee">
              <el-input placeholder="请输入" v-model="form.transportFee">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制单金额" prop="createFee">
              <el-input placeholder="请输入" v-model="form.createFee">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showType == 1">
          <el-col :span="12">
            <el-form-item label="提车金额" prop="pickFee">
              <el-input placeholder="请输入" v-model="form.pickFee">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交付金额" prop="deliveryFee">
              <el-input placeholder="请输入" v-model="form.deliveryFee">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showType == 2">
          <el-col :span="12">
            <el-form-item label="发运利率" prop="transportFee">
              <el-input placeholder="请输入" v-model="form.transportFee">
                <template slot="append">点</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制单利率" prop="createFee">
              <el-input placeholder="请输入" v-model="form.createFee">
                <template slot="append">点</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showType == 2">
          <el-col :span="12" prop="pickFee">
            <el-form-item label="提车利率" prop="pickFee">
              <el-input placeholder="请输入" v-model="form.pickFee">
                <template slot="append">点</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交付利率" prop="deliveryFee">
              <el-input placeholder="请输入" v-model="form.deliveryFee">
                <template slot="append">点</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showType == 3">
          <el-col :span="24">
            <el-table :data="form.userAwardBaseParamList" style="width: 100%" border>
              <el-table-column prop="transportFee" label="发运金额" width="160">
                <template slot-scope="scope">
                  <el-form-item :prop="'userAwardBaseParamList.' + scope.$index + '.transportFee'" :rules="rules.transportFee" style="position: relative;left: -70px;">
                    <el-input placeholder="请输入" v-model="scope.row.transportFee" style="width: 100%">
<!--                      <template slot="append">元</template>-->
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="createFee" label="制单金额" width="160">
                <template slot-scope="scope">
                  <el-form-item :prop="'userAwardBaseParamList.' + scope.$index + '.createFee'" :rules="rules.createFee" style="position: relative;left: -70px;">
                  <el-input placeholder="请输入" v-model="scope.row.createFee">
<!--                    <template slot="append">元</template>-->
                  </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="pickFee" label="提车金额" width="160">
                <template slot-scope="scope">
                  <el-form-item :prop="'userAwardBaseParamList.' + scope.$index + '.pickFee'" :rules="rules.pickFee" style="position: relative;left: -70px;">
                  <el-input placeholder="请输入" v-model="scope.row.pickFee">
<!--                    <template slot="append">元</template>-->
                  </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="deliveryFee" label="交付金额" width="160">
                <template slot-scope="scope">
                  <el-form-item :prop="'userAwardBaseParamList.' + scope.$index + '.deliveryFee'" :rules="rules.deliveryFee" style="position: relative;left: -70px;">
                  <el-input placeholder="请输入" v-model="scope.row.deliveryFee">
<!--                    <template slot="append">元</template>-->
                  </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="cityCode" label="城市">
                <template slot-scope="scope">
                  <el-form-item :prop="'userAwardBaseParamList.' + scope.$index + '.cityCode'" :rules="rules.cityCode" style="position: relative;left: -70px;">
                  <ad-city-select v-model="scope.row.cityCode" style="width: 100%"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleAdd()">新增</el-button>
                  <el-button type="text" size="small" @click="deleteList(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import AdTable from '@/components/AdTable'
import AdCitySelect from '@/components/AdCitySelect'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import { userAwardBaseList,userAwardBaseAdd,userAwardBaseEdit,userAwardBaseDelete } from '@/api/site'
import adTable from '@/mixins/adTable'
export default {
  components: {
    AdCitySelect,
    AdTableColumn,
    AdTable
  },
  name: 'commission',
  props: {
    id: String
  },
  mixins: [adTable('order')],
  data(){
    return{
      showType:1,
      visible:false,
      title:'新增',
      form:{
        siteId:'',
        name:'',
        royaltyType:'1',
        cityCode:'',
        transportFee:'',
        createFee:'',
        pickFee:'',
        deliveryFee:'',
        userAwardBaseParamList:[
          {
            transportFee:'',
            createFee:'',
            pickFee:'',
            deliveryFee:'',
            cityCode:''
          }
        ]
      },
      rules:{
        createFee:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        pickFee:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        transportFee:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        deliveryFee:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        name:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        royaltyType:[
          {required:true,message:'请选择',trigger:'change'}
        ],
        cityCode:[
          {required:true,message:'请选择',trigger:'change'}
        ]
      },
      dialogVisible: false,
      tableData: []
    }
  },
  // 监听id并且第一次肯定会执行
  watch:{
    'form.royaltyType':{
      handler(val){
        this.showType = val
      },
      immediate:true
    }
  },
  created(){
    this.getList()
  },
  methods:{
    // 添加或者编辑
    add(){
      this.$refs['form'].validate((valid)=>{
        if(valid){
          this.form.siteId = this.id
          if(this.title == '编辑'){
            userAwardBaseEdit(this.form).then(res=>{
              this.$message({
                type:'success',
                message:'修改成功'
              })
              this.getList()
              this.title = '新增'
              this.dialogVisible = false
            })
          }else{
            this.form.royaltyType != 3 ? this.form.userAwardBaseParamList = [] : ''
            userAwardBaseAdd(this.form).then(res=>{
              // this.$message({
              //   type:'success',
              //   message:'新增成功'
              // })
              this.getList()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    // 新增网点提成
    addCommission(){
      this.dialogVisible = true
      this.form = {
        siteId:'',
        name:'',
        royaltyType:'1',
        cityCode:'',
        transportFee:'',
        createFee:'',
        pickFee:'',
        deliveryFee:'',
        userAwardBaseParamList:[
          {
            transportFee:'',
            createFee:'',
            pickFee:'',
            deliveryFee:'',
            cityCode:''
          }
        ]
      }
      this.title = '新增'
      this.$refs.form.resetFields()
    },
    // 新增路线提成
    handleAdd(){
      this.form.userAwardBaseParamList.push({
        deliveryFee:'',
        transportFee:'',
        createFee:'',
        pickFee:'',
        cityCode:''
      })
    },
    // 根据索引删除当前行，但保留一行
    deleteList(index){
      if(this.form.userAwardBaseParamList.length > 1){
        this.form.userAwardBaseParamList.splice(index,1)
      }else{
        this.$message({
          type:'warning',
          message:'至少保留一行'
        })
      }
    },
    // 获取列表
    getList(){
      userAwardBaseList({}).then(res=>{
       this.tableData = res.data
      })
    },
    // 编辑
    handleEdit(row){
      this.form = row
      this.form.royaltyType = this.form.royaltyType.toString()
      if (this.form.royaltyType == 3) {
        this.form.userAwardBaseParamList = [
          {
            transportFee:this.form.transportFee,
            createFee:this.form.createFee,
            pickFee:this.form.pickFee,
            deliveryFee:this.form.deliveryFee,
            cityCode:this.form.cityCode
          }
        ]
      }
      this.title = '编辑'
      this.dialogVisible = true
    },
    // 删除
    handleDelete(row){
      this.$confirm('此操作将永久删除该提成, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userAwardBaseDelete({
          id:row.id
        }).then(res=>{
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.getList()
        })
      }).catch(() => {

      });
    },

  }
}
</script>

<style scoped>
:deep(.el-form-item__content){
  width: 80% !important;
}
</style>